<template>
    <van-steps direction="vertical" :active="0" :class="['detail-list', isSafari ? 'safari' : '', isEdge ? 'edge' : '']">
        <van-step v-for="item in listData" :key="item.state_text">
            <div class="list-status">{{ item.type === 1 ? '留言' : item.state_text }}</div>
            <div class="list-content" :style="{ backgroundColor: item.type === 1 ? '#edfed7' : '#fee8c8' }">

                <!-- 列表 -->
                <template v-if="!item?.type">

                    <div class="list-content-item" v-if="item?.to">
                        <div class="list-item-left">TO</div>
                        <div class="list-item-right">{{ item?.to?.name }}</div>
                    </div>

                    <div class="list-content-item" v-if="item?.cc.length">
                        <div class="list-item-left">CC</div>
                        <div class="list-item-right">
                            <span v-for="(i, index) in item?.cc" :key="index"> {{ item?.cc.length - 1
                                === index ? i.name : i.name + ',' }}</span>
                        </div>
                    </div>

                    <div class="list-content-item" v-if="item?.due_time || item?.due_time === ''">
                        <div class="list-item-left">截至时间</div>
                        <div class="list-item-right" v-if="item?.due_time">
                            {{ item?.due_time }}
                        </div>
                    </div>

                    <div class="list-content-item" v-if="item?.trust_ref_no || item?.trust_ref_no === ''">
                        <div class="list-item-left">TRUST编号</div>
                        <div class="list-item-right" v-if="item?.trust_ref_no">
                            {{ item?.trust_ref_no }}
                        </div>
                    </div>

                    <div class="list-content-item"
                        v-if="item?.reason_type || item?.reason_type === 0 || item?.reason_type === null">
                        <div class="list-item-left">原因类别</div>
                        <div class="list-item-right" v-if="item?.reason_type || item?.reason_type === 0">
                            {{ CauseType[item?.reason_type] }}
                        </div>
                    </div>

                    <div class="list-content-item" v-if="item?.scores">
                        <div class="list-item-left">客户评价</div>
                        <div class="list-item-right list-item-rate">
                            <van-rate v-model="item.scores" readonly color="#f7ba2a" void-color="#fff" size="16px" />
                            <div style="padding-left: 10px">{{ scoresName[item.scores] }}</div>
                        </div>
                    </div>

                    <div class="list-content-item" v-if="item?.comment || item?.comment === ''">
                        <div class="list-item-left">说明</div>
                        <div class="list-item-right" v-if="item?.comment">
                            {{ item.comment }}
                        </div>
                    </div>

                    <div class="list-content-item">
                        <div class="list-item-left">处理人及操作</div>
                        <div class="list-item-right" :style="{ color: item?.from?.user_type ? '#bf1920' : '#0349e7' }">
                            {{ item?.from?.name }}-{{ item?.operation_text }}
                        </div>
                    </div>

                    <div class="list-content-item" v-if="item?.time">
                        <div class="list-item-left">处理时间</div>
                        <div class="list-item-right" style="color: #8e8e8e;">
                            {{ item?.time }}
                        </div>
                    </div>
                </template>

                <!-- 留言列表 -->
                <template v-else>
                    <div class="list-content-item" v-if="visible">
                        <div class="list-item-left">公开范围</div>
                        <div class="list-item-right">
                            <van-radio-group v-model="item.is_public" direction="horizontal" disabled>
                                <van-radio :name="0" icon-size="14px">社内</van-radio>
                                <van-radio :name="1" icon-size="14px">社外</van-radio>
                            </van-radio-group>
                        </div>
                    </div>

                    <div class="list-content-item" v-if="item?.chat_content">
                        <div class="list-item-left">留言</div>
                        <div class="list-item-right">
                            {{ item.chat_content }}
                        </div>
                    </div>

                    <div class="list-content-item">
                        <div class="list-item-left">处理人及操作</div>
                        <div class="list-item-right" :style="{ color: item?.from?.user_type ? '#bf1920' : '#0349e7' }">
                            {{ item?.from?.name }}-{{ item?.operation_text }}
                        </div>
                    </div>

                    <div class="list-content-item" v-if="item?.time">
                        <div class="list-item-left">处理时间</div>
                        <div class="list-item-right" style="color: #8e8e8e;">
                            {{ item?.time }}
                        </div>
                    </div>

                    <div class="list-content-item" v-if="item?.attachments?.length">
                        <div class="list-item-left">附件</div>
                        <div class="list-item-right">
                            <template v-for="k in item?.attachments" :key="k.file_path">
                                <div @click="downloadFile(k.file_name, k.file_path)"
                                    style="color: #0349e7;margin-bottom: 5px;">
                                    <u>{{ k.file_name }}</u>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </van-step>
    </van-steps>
</template>

<script setup lang='ts'>
import { workAttachmentDownload } from '@/api/worksheets';
import { ListType } from '@/api/worksheets/type';
import { CauseType } from '@/enum/clientType'
import { download } from '@/utils/downloadUrl';
import { isSafariBrowser, isEdgeBrowser } from '@/utils/browser'

onMounted(() => {
    isSafari.value = isSafariBrowser()

    isEdge.value = isEdgeBrowser().isEdge && isEdgeBrowser().isAndroid
})

defineProps<{
    listData: ListType[]
}>()

const visible = computed(() => {
    return Number(localStorage.getItem('mobile_userType'))
})

const isSafari = ref(false)

const isEdge = ref(false)

const scoresName = {
    1: '非常不满意',
    2: '不满意',
    3: '一般',
    4: '满意',
    5: '非常满意',
}

//附件下载
const downloadFile = async (name: string, url: string) => {

    try {
        const res: any = await workAttachmentDownload({ file_path: url })

        download(res.download_url, name)

    } catch (err) {
        //
    }
}
</script>

<style lang="scss" scoped>
.safari {
    margin-bottom: 70px;
}

.edge {
    margin-bottom: 160px;
}

.list-status {
    padding: 10px 0;
    font-weight: 600;
    font-size: 15px;
}

.list-content {
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-right: 10px;

    .list-content-item {
        display: flex;
        align-items: center;
        // font-weight: 600;
        padding-bottom: 10px;

        .list-item-left {
            width: 120px;
        }

        .list-item-right {
            flex: 1;
        }

        .list-item-rate {
            display: flex;
            align-items: center;
        }
    }
}

:deep(.van-step--vertical) {
    padding: 0;
}

:deep(.van-step__icon--active) {
    color: #000;
}

:deep(.van-step__title--active) {
    color: #000;
}

:deep(.van-step) {
    color: #000;
}

:deep(.van-step:last-child) {
    padding-bottom: 60px;
}
</style>